<template>
  <div>
    <el-card class="box-card">
      <div class="input_box">
        <el-input
          placeholder="请输入内容"
          class="in"
          clearable
          v-model="list.query"
          @input="oninput"
        >
        </el-input>
        <div class="button">
          <el-button icon="el-icon-search"></el-button>
        </div>
      </div>
      <div class="table">
        <el-table border :data="showlist" style="width: 100%" size="small ">
          <el-table-column type="index" label="#" width="50"> </el-table-column>
          <el-table-column prop="order_number" label="订单编号" width="180">
          </el-table-column>
          <el-table-column prop="order_price" label="订单价格" width="180">
          </el-table-column>
          <el-table-column prop="pay_status" label="是否付款">
            <template slot-scope="scope">
              <el-tag
                effect="dark"
                type=""
                size="mini"
                v-if="scope.row.pay_status === '1'"
                >已付款</el-tag
              >
              <el-tag type="danger" effect="dark" size="mini" v-else
                >未付款</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="is_send" label="是否发货"> </el-table-column>
          <el-table-column prop="create_time" label="下单时间">
            <template slot-scope="scope">
              <div class="time">{{ scope.row.create_time | dateTime }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="edit(scope.row)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-location-outline"
                size="mini"
                @click="onlogistics"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="list.pagenum"
            :page-sizes="[1, 5, 10, 15, 20]"
            :page-size="list.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(this.total)"
          >
          </el-pagination>
        </div>
        <!-- 编辑弹框 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-cascader
                :options="classify"
                :props="defaultProps"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <!-- 物流对话框 -->
        <el-dialog title="查看物流" :visible.sync="logistics">
          <span>
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.time"
              >
                {{ activity.context }}
              </el-timeline-item>
            </el-timeline>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="logistics = false">取 消</el-button>
            <el-button type="primary" @click="logistics = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Orderlist, GoodsClassify, getlogisticsAPI } from "../../http/api";
export default {
  data() {
    return {
      list: {
        pagenum: 1,
        pagesize: 5,
        query: "",
      },
      activities: [],
      showlist: [],
      total: "",
      dialogFormVisible: false,
      logistics: false,
      form: {
        cat_name: "",
      },
      formLabelWidth: "120px",
      classify: [],
      defaultProps: {
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },
    };
  },
  created() {
    this.Indentlist();
  },
  methods: {
    async Indentlist() {
      const res = await Orderlist(this.list);
      console.log(res);
      this.showlist = res.goods;
      this.total = res.total;
    },
    handleSizeChange(val) {
      this.list.pagesize = val;
      this.Indentlist();
    },
    handleCurrentChange(val) {
      this.list.pagenum = val;
      this.Indentlist();
    },
    oninput() {
      // console.log(this.list.query);
      this.Indentlist();
    },
    async edit(row) {
      this.dialogFormVisible = true;
      console.log(row);
      const res = await GoodsClassify();
      console.log(res);
      this.classify = res;
    },
    handleChange() {},
    async onlogistics() {
      this.logistics = true;
      const res = await getlogisticsAPI();
      console.log(res);
      this.activities = res;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input__inner {
  border-radius: 0px !important;
}
.input_box {
  width: 100%;
  height: 40px;
  // background-color: rebeccapurple;
  display: flex;
  justify-content: flex-start;
  .in {
    width: 346px;
  }
}
.button {
  .el-button {
    border-radius: 0px !important;
    background-color: #f5f7fa;
  }
}
.table {
  margin-top: 20px;
}
.time {
  font-size: 10px;
}
.pagination {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.el-cascader {
  width: 100%;
}
</style>